<template>
  <div style="margin-top: 20px">
    <div class="view-equip-title">基础信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">点检计划编号</div>
          <div class="text">{{ planDetailData.planNo }}</div>
        </div>
        <div class="view-equip-item large">
          <div class="label">点检计划名称</div>
          <div class="text">{{ planDetailData.planName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">科室</div>
          <div class="text">{{ planDetailData.classNameDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">系统</div>
          <div class="text">{{ planDetailData.systemCodeDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备编号</div>
          <div class="text">{{ planDetailData.eqpId }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备名称</div>
          <div class="text">{{ planDetailData.eqpName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备位置</div>
          <div class="text">{{ planDetailData.positionName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">任务分配</div>
          <div class="text">{{ planDetailData.groupCodeName }}</div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">异常信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item middle">
          <div class="label">异常来源</div>
          <div class="text">{{ planDetailData.unnormalSourceDesc }}</div>
        </div>
        <div class="view-equip-item middle">
          <div class="label">异常单号</div>
          <div class="text">{{ planDetailData.relatedOrderNum }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">异常描述</div>
          <div class="text">{{ planDetailData.unnormalDesc }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">异常图片</div>
          <div class="text">
            <PhotoUpload photoType="view" :photoList="planDetailData.imageIds" />
          </div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">点检建议</div>
          <div class="text">{{ planDetailData.checkAdvice }}</div>
        </div>
      </div>
    </div>
    <div ref="periodRef" class="view-equip-title">执行周期</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">执行方式</div>
          <div class="text">{{ ["", "固定时间", "周期时间"][planDetailData.execType] }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">开始时间</div>
          <div class="text">{{ planDetailData.execStartDate }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">结束时间</div>
          <div class="text">{{ planDetailData.execEndDate }}</div>
        </div>
      </div>
      <template v-if="+planDetailData.execType === 2">
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">排查周期</div>
            <div class="text">
              {{ dealExecTime() }}
              <px-tag v-for="item in weeks" :key="item" class="ml-[6px]" type="info">{{ item }}</px-tag>
              <px-tag v-for="item in days" :key="item" class="ml-[6px]" type="info">{{ item }}</px-tag>
            </div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">任务执行时间</div>
            <div class="text">
              <px-tag v-for="item in operateTimes" :key="item" class="mt-[3px] mr-[3px]" type="info">{{ item }}</px-tag>
            </div>
          </div>
          <div class="view-equip-item">
            <div class="label">执行时长</div>
            <div class="text">{{ `${planDetailData.execDuration}${unitList[planDetailData.execDurationUnit]}` }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">宽泛期</div>
            <div class="text">{{ `${planDetailData.extendDuration}${unitList[planDetailData.extendDurationUnit] || ""}` }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">任务生成并提醒时间</div>
            <div class="text">{{ taskList[planDetailData.taskCreateTime] }}</div>
          </div>
        </div>
      </template>
    </div>
    <div v-if="planDetailData.contentList && planDetailData.contentList.length !== 0">
      <div class="view-equip-title">点检内容</div>
      <div v-for="(item, index) in planDetailData.contentList" :key="index">
        <EditDropDown :dropdownTitle="item.checkContentName">
          <template v-slot:content>
            <px-table :data="item.pointCheckContentItemList" style="margin-bottom: 18px" class="equip-table" size="small" max-height="400" border>
              <!-- <px-table-column fixed="left" label="" align="center" width="60">
              <px-icon><ViewList /></px-icon>
            </px-table-column> -->
              <px-table-column fixed="left" type="index" label="序号" width="60" />
              <px-table-column fixed="left" prop="checkItem" label="巡检项" min-width="120" show-overflow-tooltip />
              <px-table-column prop="checkContent" label="巡检内容" min-width="150" show-overflow-tooltip />
              <px-table-column prop="checkContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip>
                <template #default="scope">
                  <div v-if="scope.row.checkContentRange === 1">文本</div>
                  <div v-if="scope.row.checkContentRange === 2">数字</div>
                  <div v-if="scope.row.checkContentRange === 3">判断：{{ scope.row.checkContentRangeValue || "-" }}</div>
                  <div v-if="scope.row.checkContentRange === 4">选择：{{ scope.row.checkContentRangeValue || "-" }}</div>
                </template>
              </px-table-column>
            </px-table>
          </template>
        </EditDropDown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { ref, watch } from "vue";

// 父级传过来的值
const props = defineProps(["planDetailData"]);

const weeks = ref([]);
const days = ref([]);
const operateTimes = ref([]);

const weeksMap = {
  MONDAY: "星期一",
  TUESDAY: "星期二",
  WEDNESDAY: "星期三",
  THURSDAY: "星期四",
  FRIDAY: "星期五",
  SATURDAY: "星期六",
  SUNDAY: "星期日"
};

const unitList = {
  DAY: "日",
  HOUR: "小时"
};
const taskList = ["", "准点生成", "提前10分钟", "提前30分钟", "提前1小时", "提前1天"];

const operateTimeArr = Array.from({ length: 24 }, (_, i) => (i < 10 ? `0${i}:00` : `${i}:00`));

watch(
  () => props.planDetailData,
  newVal => {
    if (newVal) {
      const { cycleTime: resCycleTime } = props.planDetailData;
      if (resCycleTime) {
        const arr = resCycleTime.split(",").sort((a, b) => a - b);
        operateTimes.value = arr.reduce((pre, cur) => {
          return [...pre, operateTimeArr[cur]];
        }, []);
      }
    }
  }
);

function dealExecTime() {
  if (props.planDetailData.cyclePerUnit === "DAY") {
    if (props.planDetailData.cyclePerNum) {
      return `每${props.planDetailData.cyclePerNum}天`;
    }
  } else if (props.planDetailData.cyclePerUnit === "WEEK") {
    if (props.planDetailData.cyclePerNum) {
      if (props.planDetailData.cycleValue) {
        let arr = props.planDetailData.cycleValue.split(",");
        Object.keys(weeksMap).forEach(item => {
          if (arr.includes(item)) {
            weeks.value.push(weeksMap[item]);
          }
        });
      }
      return `每${props.planDetailData.cyclePerNum}周的`;
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
